<template>
  <div class="table_box" v-loading="loading">
    <el-table :data="historyVersions" ref="multipleTable" class="historyTable" style="width: 100%;height: 400px;overflow-y: auto;" >
      <el-table-column prop="realName" label="文件名">
        <template #default="scope">
          <div class="realName_box">
            <el-tooltip
              effect="dark"
              :content="scope.$index == 0 ? props.fileDetailInfo.realName : scope.row.originalName"
              placement="top-start"
              :offset="8"
            >
              <div class="title1">{{ scope.$index == 0 ? props.fileDetailInfo.realName : scope.row.originalName }}</div>
            </el-tooltip>
           
            <el-button type="text" class="realName_box_right" :disabled="judgePermission('download')" v-if="!judgePermission('download')">
              <a :href="scope.row.url" >
                <svg-icon icon-class="download" class="icon_size" />
              </a>
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="editionName" label="版本">
        <template #default="scope">{{ scope.$index == 0 ? '当前' : scope.row.versionName }}</template>
      </el-table-column>
      <el-table-column label="更新人">
        <template #default="scope">
          <div class="peopleBox" v-if="scope.row.createNickName || scope.row.createBy">
            <div class="people">
              <span>
                {{ (scope.row.createByName && scope.row.createByName.slice(-2)) || (scope.row.createBy && scope.row.createBy.slice(-2)) }}
              </span>
            </div>
            {{ scope.row.createByName  }}
          </div>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="更新时间" width="170px"></el-table-column>
    </el-table>
  </div>
</template>
     
<script setup lang='ts'>
import { ref } from 'vue';
const { proxy } = getCurrentInstance() as any;
import { ApiPergetFilesVersions } from '@/api/personDoc/personDocApi';
const loading = ref<boolean>(false); // 控制loading
const historyVersions = ref<any[]>([]); // 历史版本列表
  const parentObj = ref({
  id: '',
  libraryType: ''
});
const props = defineProps({
  fileDetailInfo: {
    type: Object,
    default: () => ({})
  },
  roleList: {
    type: Array,
    default: () => []
  }
});
// 获取历史版本列表
// 查询历史版本
const apiOnlineSelectFilesVersions = (row) => {
  parentObj.value = row;
  loading.value = true;
  let oParam = {
    moduleId: props.fileDetailInfo.id,
    type: props.fileDetailInfo.libraryType
  };

  ApiPergetFilesVersions(oParam)
    .then((res) => {
      loading.value = false;

      historyVersions.value = res.rows;
    })
    .catch((err) => {
      loading.value = false;
    });
};
/**权限控制 */
const judgePermission = (str: any) => {
  return !proxy.$yuUtils.documentsPermissionFunc([str], props.roleList);
  //   if (this.pageType == "enterprise") {
  //     return !this.$yuUtils.documentsPermissionFunc([str], this.enterpriseMyRoleList);
  //   } else if (this.pageType == "team") {
  //     return !this.$yuUtils.documentsPermissionFunc([str], this.myTeamFIleRoleList);
  //   } else {
  //     return false;
  //   }
};
// 下载
const downloadFileFunc = (row: any) => {

  proxy?.$download.downloadFile([props.fileDetailInfo.id], props.fileDetailInfo.libraryType);
};
defineExpose({
  //调用组件需要导出 v-model的变量
  apiOnlineSelectFilesVersions
});
</script>
<style scoped lang="scss">
// 文字几行隐藏
@mixin textOverflow($clamp) {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: $clamp; //元素几行显示
  -webkit-box-orient: vertical;
}
.table_box {
  :deep(th) {
    color: #666;
    font-weight: normal;
    font-size: 14px;
    height: 51px;
  }
  :deep(tr) {
    color: #333;
    height: 51px;
  }
  :deep(.el-table__body tr:hover .realName_box_right) {
    visibility: visible;
  }
}
.peopleBox {
  display: flex;
  align-items: center;
  .people {
    width: 26px;
    height: 26px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    background-color: #56abfb;
    margin-right: 3px;
    span {
      display: inline-block;
      margin-top: 2px;
      transform: scale(0.9, 0.9);
    }
  }
}
.realName_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title1 {
    width: 85%;
    @include textOverflow(1);
  }
}
.realName_box_right {
  visibility: hidden;
}
</style>